<!-- <template>
	<view style="background-color: #FFFFFF;">
		<view v-for="(item) in list" :key="item.productClusterId" class="catalog-product" @tap="navigateTo(item.entrance)">
			<image :src="item.thumbnail" mode="widthFix" class="catalog-product-left" lazy-load="true"></image>
			<view class="catalog-product-right" style="position: relative;">
				<view style="display: flex; flex-direction: column; flex: 1; ">
					<text class="two-line-title m-b-5" style="font-size: 28rpx;">{{item.title}}</text>
					<text v-if="item.description" class="product-desc one-line-title m-b-5">{{item.description}}</text>
					<view v-if="item.discount" style="line-height: 24rpx;">
						<text class="discount">{{item.discount}}</text>
					</view>
				</view>
				<view class="product-price-wrap" style="display: flex; flex-direction: row; align-items: flex-end;">
					<text class="price">¥{{item.priceString}}</text>
					<text class="original-price" v-if="item.originalPriceString">¥{{item.originalPriceString}}</text>
				</view>
			</view>
			<image src="/static/icon/add_btn.png" class="cart-btn" style="width: 55rpx; height: 55rpx; right: 10rpx;"></image>
		</view>
	</view>
</template> -->

<template>
	<view style="background-color: #FFFFFF;">
		<!-- <view v-for="(item) in list" :key="item.productClusterId" class="catalog-product" @tap="navigateTo(item.entrance)">
			<image :src="item.thumbnail" mode="widthFix" class="catalog-product-left" lazy-load="true"></image>
			<view class="catalog-product-right" style="position: relative;">
				<view style="display: flex; flex-direction: column; flex: 1; ">
					<text class="two-line-title m-b-5" style="font-size: 28rpx;">{{item.title}}</text>
					<text v-if="item.description" class="product-desc one-line-title m-b-5">{{item.description}}</text>
					<view v-if="item.discount" style="line-height: 24rpx;">
						<text class="discount">{{item.discount}}</text>
					</view>
				</view>
				<view class="product-price-wrap" style="display: flex; flex-direction: row; align-items: flex-end;">
					<text class="price">¥{{item.priceString}}</text>
					<text class="original-price" v-if="item.originalPriceString">¥{{item.originalPriceString}}</text>
				</view>
			</view>
			<image src="/static/icon/add_btn.png" class="cart-btn" style="width: 55rpx; height: 55rpx; right: 10rpx;"></image>
		</view> -->
		
		<product-item-four
			v-for="(item) in list" :key="item.productClusterId"
			:src="item.thumbnail"
			:dSrc="item.promotions ? item.promotions[0].picturesUrl : null"
			:title="item.title"
			:titleLabel="item.promotions ? item.promotions[0].label : null"
			:discount="item.discount"
			:originalPrice="item.originalPriceString ? '¥' + item.originalPriceString : null"
			:price="item.priceString ? '¥' + item.priceString : null"
		/>
		
	</view>
</template>

<script>
	export default {
		props: ['list'],
		data() {
			return {
				
			};
		},
		methods: {
			navigateTo() {
				
			},
			addToCart() {
				
			}
		}
	}
</script>

<style>
	.catalog-product {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		border-bottom: 1rpx solid #f7f7f7;
		/* #endif */
		/* #ifdef APP-PLUS */
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #F7F7F7;
		/* #endif */
		flex-direction: row;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		position: relative;
	}

	.catalog-product-left {
		/* min-width: 130px; */
		width: 220rpx;
		min-width: 220rpx;
		height: 220rpx;
		/* padding: 5rpx 0; */
	}

	.catalog-product-right {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
		/* padding: 20rpx 0 20rpx 20rpx; */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 0;
		padding-left: 20rpx;
	}
</style>
